<template>
    <div class="count">
        <h2>名字为 {{ countStore.name }}</h2>
        <h2>当前求和为 {{ countStore.sum }}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="sub">减</button>
    </div>
</template>

<script setup>
    import {ref} from "vue";

    let n = ref(1) //用户选择的数字
    //引入useCountStore
    import {useCountStore} from '@/store/count.js'
    //使用useCountStore,得到专门保存count相关的store
    const countStore =  useCountStore()

    function add() {
        //第一种修改数据方式
        //countStore.sum += n.value
        //countStore.name = 'lisi'

        //第二种修改数据方式
        /*countStore.$patch({
            sum: 100,
            name: 'wangwu'
        })*/

        //第三种修改数据方式
        countStore.add(n.value)

    }

    function sub() {
        countStore.sum -= n.value
    }
</script>


<!--<script setup name="Count">
    import {ref} from "vue";
    //数据
    let sum =  ref(1) //求和
    let n = ref(1) //用户选择的数字

    function add() {
        sum.value += n.value
    }

    function sub() {
        sum.value -= n.value
    }
</script>-->


<style scoped>
    .count {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }

    li {
        font-size: 20px;
    }
</style>